<template>
    <div>
        <bufantop></bufantop>
        <!-- banner轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in list.gallery" :key="item.id" class="banner">
                <img :src="item.img_url" alt="">
            </van-swipe-item>
        </van-swipe>

        <ul class="top">
            <li>30天无忧退货</li>
            <li>48小时快速退款</li>
            <li>满88元免邮费</li>
            <div style="clear:both;"></div>
        </ul>
        <!-- 商品名称及价格 -->
        <div class="card">
            <p class="name">{{list.info.name}}</p>
            <p class="desc">{{list.info.goods_brief}}</p>
            <p class="price">¥{{list.info.retail_price}}</p>
        </div>

        <div class="num">请选择规格数量</div>


        <!-- 商品参数 -->
        <div class="attribute">
            <div class="head">商品参数</div>
            <div class="item" v-for="item in list.attribute" :key="item.id">
                <div>{{item.name}}</div>
                <div>{{item.value}}</div>
            </div>
            
        </div>

        <!-- 商品详情图片 -->
        <div class="picture" v-html="list.info.goods_desc">
            
        </div>

        <!-- 大家都在看 -->
        <div class="look">
            <div class="line"></div>
            <div class="title">大家都在看</div>
            <div class="line"></div>
        </div>
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in list.productList" :key="item.id">
                <van-image :src="item.list_pic_url" />
                <p>{{item.name}}</p>
                <p>¥{{item.retail_price}}</p>
            </van-grid-item>
        </van-grid>

        <!-- 购买购物车相关 -->
         <div class="buyMenu">
             <!-- 是否收藏 -->
            <div class="collect" @click="inCollect" :class="shows ? 'active':''">

            </div>
            <div class="cart">
                <div class="car">
                    <span>30</span>
                    <img src="" alt="">
                </div>
            </div>
            <div class="gobuy" @click="onShow">
                立即购买
            </div>
            <div class="joinCart" @click="onShow">
                加入购物车
                
            </div>
        </div>
        <div class="space"></div>
        <van-popup class="buynum" v-model="show" closeable position="bottom" :style="{ height: '35%' }">
            <div class="top">
                <div class="left">
                    <img :src="list.info.primary_pic_url" alt="">
                </div>
                <div class="right">
                    <div>
                        <p>价格¥{{list.info.retail_price}}</p>
                        <p class="choiceNum">请选择数量</p>
                    </div>
                </div>
            </div>
            <van-stepper v-model="num" />
        </van-popup>
    </div>
</template>

<script>
import {detailaction,addCart,addcollect} from "@/api/home/detailaction"
import bufantop from "@/components/bufantop.vue"
export default {
    data(){
        return{
            value:"",
            list:[],
            //是否收藏
            shows:false,
            //加入购物车弹窗
            show:false,
            // 购买数量
            num:1,
            // 用户Id
            user:"",
        }
    },
    components:{
        bufantop,
    },
    created(){
        console.log(this.$route.query.val);
        this.value=this.$route.query.val
        this.getData();
    },
    methods:{
        //获取商品详情列表
        getData(){
            this.user = localStorage.getItem("openId")
            detailaction({
                id:this.value,
                openId:this.user,
            }).then(res=>{
                console.log(res);
                this.list=res
            })
        },
        // 是否收藏
        inCollect(){
            this.shows=!this.shows;
            if(this.shows==true){
                addcollect({
                    goodsId:this.value,
                    openId:this.user,
                }).then(res=>{
                    console.log(res);
                })
            }
        },
        // 打开购买数量页面
        onShow(){
            if(this.show==true){
                this.buyNum();
            }else{
               this.show=!this.show 
            }
            
        },
        //商品添加到购物车
        buyNum(){
            addCart({
                goodsId:this.value,
                number:this.num,
                openId:this.user,
            }).then(res=>{
                console.log(res);
                this.$toast.success('添加到购物车成功');
            })
        }
    }
}
</script>


<style lang="scss">
    // 商品详情图片
    .picture p img{
        width: 100%;
    }
    //购买数量页面
    .buynum{
        padding: 15px;
        box-sizing: border-box;
    }   
</style>

<style lang="scss" scoped>
    banner图片设置
    .banner{
        width: 375px;
        height: 375px;
    }
    .banner img{
        width: 100%;
        height: 100%;
    }

    // 退换货背景图设置
    .top{
        width: 100%;
        height: 36.5px;
        display: flex;
        justify-content: space-between;
        
    }
    .top li{
        float: left;
        display: flex;
        align-items: center;
        padding: 15px 10px;
        background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) no-repeat 0 center ;
        background-size: 5px;
    }
    // 商品名称及价格
    .card{
        background-color: #fff;
    }
    .card .name{
        font-size: 20px;
        padding: 10px;
        margin: 10px 0;
    }
    .card .desc{
        font-size: 12px;
        color: #999;
        margin: 12px 0;
    }
    .card .price{
        font-size: 18px;
        color: #b4282d;
        margin: 5px 0 17.5px;
    }
    //请选择数量
    .num{
        width: 100%;
        height: 54px;
        line-height: 54px;
        background: url() no-repeat right center ;
        background-size: 26px;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: left;
        background: #fff;
    }
    //商品参数
    .attribute{
        background-color: #fff;
        margin-bottom: 10px;
        padding: 10px 15px;
    }
    .head{
        font-size: 19px;
        padding: 10px 0;
    }
    .item{
        display: flex;
        background: #f7f7f7;
        padding: 10px 0;
        margin: 10px;
    }
    .item div:nth-child(1){
        width: 67px;
        font-size: 12px;
        color: #999;
    }
    .item div:nth-child(2){
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }
    //大家都在看
    .look{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .look .line{
        display: inline-block;
        width: 50px;
        height: 0.5px;
        background: #ccc;
    }
    // 底部购买相关
    .buyMenu{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 375px;
        height: 50px;
        background-color: #fff;
        display: flex;
        // align-items: center;
        // justify-content: center;
        z-index: 2020;
    }
    // 收藏
    .collect{
        width: 81px;
        height: 50px;
        border: 1px solid #f4f4f4;
        background: url() no-repeat center ;
        background-size: 22px;
    }
    .buyMenu .active{
        background: url() no-repeat center ;
        background-size: 22px;
    }


    // 购物车
    .cart{
        width: 81px;
        height: 50px;
        border: 1px solid #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: center;
        .car{
            position: relative;
            width: 30px;
            height:30px;
            span{
                width: 14px;
                height: 14px;
                z-index: 10;
                position: absolute;
                top: 0;
                right: 0;
                background: #b4282d;
                text-align: center;
                font-size: 9px;
                line-height: 14px;
                border-radius: 50%;
                color: #fff;
            }
            img{
                width: 22px;
                height: 22px;
                position: absolute;
                top: 5px;
                left: 0;
            }
        }
    }
    // 立即购买
    .gobuy{
        width: 103.5px;
        height: 50px;
        line-height: 50px;
        flex:1;
        text-align: center;
        border-top:1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
    }
    // 加入购物车
    .joinCart{
        width: 103.5px;
        height: 50px;
        line-height: 50px;
        flex:1;
        text-align: center;
        border: 1px solid #b4282d;
        background: #b4282d;
        color: #fff;
    }
    // 占位
    .space{
        width: 375px;
        height: 50px;
    }
    //购买商品数量页面
    
    .top{
        display: flex;
        margin-bottom: 17.5px;
        position: relative;
        height: 88.5px;
    }
    .left{
        width: 88.5px;
        height: 88.5px;
        margin-right: 15px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .right{
        flex: 1;
        display: flex;
        align-items: flex-end;
        div{
            display: block;
            p{
                padding: 15px 0;
            }
        }
        
    }
    
</style>